<!DOCTYPE html>
<html>

<head>
<title>Cindy JS Example</title>
<meta charset="UTF-8">
<script type="text/javascript" src="../build/js/Cindy.js"></script>
<script id="csinit" type="text/x-cindyscript">
  dropped = (;); // undefined
  dropPoint = (;); // undefined
</script>
<script id="csdraw" type="text/x-cindyscript">
  img = (;);
  txt = (;);
  if (!isundefined(dropped),
    forall (dropped, i, (
      if (i_2 == "image", img = i_1);
      if (i_2 == "string", txt = i_1);
    ));
  );
  if (!isundefined(img), drawimage(A, B, img),
    if (!isundefined(txt), drawtext(A, txt, color->[0, 0.5, 0.75])));
  if (!isundefined(dropped), (
    drawtext((0, 0), length(dropped) + " files dropped " + "at point " +  dropPoint_1 + " " + dropPoint_2);
    forall (1..length(dropped), i, (
      drawtext((0, -i), dropped_i_2 + " named " + dropped_i_4);
    ));
  ), drawtext((0, 0), "Drag and drop files into this area"));

draw(point(dropPoint), color->[0,1,0], alpha->0.5);
</script>

<script id="csondrop" type="text/x-cindyscript">
  dropped = dropped();
  dropPoint = droppoint();
  err(dropped);
</script>
<script type="text/javascript">

var cdy = CindyJS({
  ports: [{id: "CSCanvas", transform: [{visibleRect: [-1, -25, 25, 1]}]}],
  scripts: "cs*",
  language: "en",
  defaultAppearance: {
  },
  geometry: [
    {name:"A", type:"Free", pos:[5,-20]},
    {name:"B", type:"Free", pos:[15,-20]},
  ]
});

</script>
</head>

<body style="font-family:Arial;">
  <div id="CSCanvas" style="width:500px; height:500px; border:2px solid black"></div>
  <p>You can also drag and drop
    <a href="../package.json" draggable="true">this link</a> (on some browsers)
    or these images (on most browsers):<br>
    <img src="rost.png" draggable="true" alt="rost">
    <img src="boe.png" draggable="true" alt="boe">
  </p>
</body>


</html>
